<template>
  <div style="padding: 10px 15px">
    <!-- 查询条件-->
    <div class="filter-container">
      <el-input
        v-model="listQuery.title"
        placeholder="请输入通道代码/通道名称"
        style="width: 200px"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-button
        v-if="Jurisdiction('添加')"
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-edit"
        @click="handleCreate"
      >新增</el-button>
      <el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >查询</el-button>
      <!-- <el-button class="filter-item" type="primary" icon="el-icon-edit"  @click="handleCreate" v-if="Jurisdiction('添加')" >新增</el-button>
      <el-button class="filter-item" type="danger" icon="el-icon-delete" @click="deleteClick" v-if="Jurisdiction('删除')">删除</el-button>-->
    </div>
    <!--查询条件 end-->

    <!--table-->
    <el-table
      v-loading="listLoading"
      :data="PayChannelData"
      border
      fit
      highlight-current-row
      style="width: 100%"
      stripe
    >
      <el-table-column label="通道名称" align="left" min-width="150px">
        <template slot-scope="{ row }">
          <span>{{ row.channelName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="通道代码" align="left" min-width="150px">
        <template slot-scope="{ row }">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="left" min-width="150px">
        <template slot-scope="{ row }">
          <span>{{ row.upTime }}</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button
            v-if="Jurisdiction('编辑')"
            type="primary"
            size="mini"
            @click="handleClick(scope.row)"
          >编辑</el-button>
          <!-- <el-button type="primary" size="mini" @click="PayTypeClick(scope.row)">支付方式管理</el-button>-->
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="listQuery.total > 0"
      :total="listQuery.total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData(this)"
    />

    <!--table end -->

    <!--弹出层  新增-->
    <el-dialog
      :title="textMap[dialogStatus]"
      :visible.sync="dialogFormVisible"
      width="55%"
      :before-close="handleClose"
      :show-close="false"
    >
      <el-form :model="form" :inline="false" label-position="right">
        <el-form-item label="配置编号">
          <el-input
            v-show="IsAdd == 1"
            v-model="form.ID"
            style="width: 80%"
          />
          <span v-show="IsAdd == 0" v-html="form.ID" />
        </el-form-item>
        <el-form-item label="通道名称">
          <el-input v-model="form.channelName" style="width: 80%" />
        </el-form-item>
        <el-form-item label="支持方式">
          <el-checkbox-group v-model="form.payTypes">
            <el-checkbox
              v-for="item in paytypeoptions"
              :key="item.value"
              :label="item.value"
            >
              {{ item.name }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item v-show="form.ID == '00001'" label="支付配置">
          <el-radio-group v-model="form.paycfg" @change="xlpaychange">
            <el-radio label="001" name="paycfg">微信</el-radio>
            <el-radio label="002" name="paycfg">支付宝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="json信息">
          <el-input
            v-model="form.content"
            type="textarea"
            :autosize="{ minRows: 8, maxRows: 16 }"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import { AjaxToken, TipConfirm } from '@/api/common'
import { SelectAjax } from '@/api/common'
import { Jurisdiction } from '@/api/common'
import sessionStorage from '@/api/Storage'
import 'url-search-params-polyfill' // 兼容IE，否则无法识别URLSearchParams
export default {
  name: 'PayChannel',
  components: { Pagination },
  data() {
    return {
      logincpnid: '',
      multipleSelection: [],
      paytypeoptions: [],
      formLabelWidth: '120px',
      selectpaytypes: [],
      PayChannelData: null,
      IsAdd: 1,
      xlcontent: [],
      listQuery: {
        title: '',
        total: 0,
        page: 1,
        limit: 10
      },
      listLoading: true,
      dialogFormVisible: false,
      dialogdetailsVisible: false,
      paytypeVisible: false,
      dialogStatus: '',
      textMap: {
        update: '修改',
        create: '添加'
      },
      form: {
        ID: '',
        channelName: '',
        content: '',
        payTypes: [],
        paycfg: ''
      },
      details_form: {
        ID: '',
        channelName: '',
        isStraightEven: '',
        createTime: '',
        updateTime: '',
        isDeleted: '',
        upateName: ''
      },
      radiostr: []
    }
  },

  // 初始化
  created() {
    var userinfo = JSON.parse(sessionStorage.getItem('userinfo'))
    this.logincpnid = userinfo.cpnId
    this.fetchData()
    backstage.GetPayTypeList(this)
  },
  methods: {
    // 弹层关闭
    handleClose() {},
    // 权限
    Jurisdiction(moduleActionName) {
      return Jurisdiction(moduleActionName, this)
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 多选赋值
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    // 搜索
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    // 新增
    handleCreate() {
      this.IsAdd = 1
      this.form.payTypes = []
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.form.ID = ''
      this.form.channelName = ''
      this.form.content = ''
    },
    // 编辑
    handleClick(row) {
      this.IsAdd = 0
      this.form.ID = row.id
      this.form.channelName = row.channelName
      this.form.payTypes = []
      if (this.form.ID == '00001') {
        this.form.paycfg = '001'
        this.radiostr = []
        this.radiostr.push(this.form.paycfg)
      }
      this.dialogStatus = 'edit'
      this.dialogFormVisible = true
      var params = new URLSearchParams()
      params.append('filename', this.form.ID)
      backstage.GetPayChannel(this, params)
    },
    // 保存
    saveForm() {
      var arr = this.multipleSelection
      var data = ''
      this.xlcontent[this.form.paycfg] = JSON.stringify(this.form.content)
      for (var key in this.xlcontent) {
        data += key + '|*|' + JSON.parse(this.xlcontent[key]) + '|||'
      }
      var params = new URLSearchParams()
      params.append('filename', this.form.ID)
      params.append('content', this.form.content)
      params.append('chanelName', this.form.channelName)
      params.append('paytypstr', this.form.payTypes)
      params.append('paycfg', data)

      backstage.SavePayChannel(this, params)
    },
    PayTypeClick(row) {
      this.form.ID = row.id
      this.paytypeVisible = true
      backstage.GetPayTypeList(this)
    },
    PayTypeSave() {
      var params = new URLSearchParams()
      params.append('PayChannelID', this.form.ID)
      params.append('selectpaytypes', JSON.stringify(this.selectpaytypes))
    },
    // 删除
    deleteClick(row) {
      var multis = []
      var params = new URLSearchParams()
      if (row == undefined || row == '') {
        var arr = this.multipleSelection
        if (arr == undefined || arr.length <= 0) {
          this.$message({
            showClose: true,
            message: '请至少选中一行',
            type: 'error'
          })
          this.listLoading = false
          return
        } else {
          for (var i = 0; i < arr.length; i++) {
            multis.push(arr[i].id)
          }
          params.append('delds', JSON.stringify(multis))
        }
      } else {
        multis.push(row.id)
        params.append('delds', JSON.stringify(multis))
      }
      this.$confirm('确认删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'error'
      })
        .then((a) => {
          this.listLoading = true
          backstage.DelPayChannel(this, params)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
          this.listLoading = false
        })
    },
    // 查询
    fetchData() {
      this.listLoading = true
      var params = new URLSearchParams()
      params.append(
        'Parms',
        '{"page":' +
          this.listQuery.page +
          ',"rows":' +
          this.listQuery.limit +
          '}'
      )
      var user = JSON.parse(sessionStorage.getItem('userinfo'))
      // params.append("CpnID",this.form.cpnID == "" ? this.user.cpnId : this.form.cpnID);
      params.append('ChannelName', this.listQuery.title)
      backstage.GetPayChannelLst(this, params)
    },
    xlpaychange() {
      this.xlcontent[
        this.radiostr[this.radiostr.length - 1]
      ] = JSON.stringify(this.form.content)
      this.radiostr.push(this.form.paycfg)
      this.form.content = JSON.parse(this.xlcontent[this.form.paycfg])
    }
  }
}
// 后台事件
var backstage = {
  // 获取PayChannel集合
  GetPayChannelLst: function(thisobj, params) {
    AjaxToken(
      thisobj,
      'GetPayChannelLst',
      params,
      'post',
      function(res) {
        thisobj.listLoading = false
        var body = res.data.data
        thisobj.PayChannelData = []
        thisobj.PayChannelData = body.rows
        thisobj.listQuery.page = body.page
        thisobj.listQuery.total = body.records
      },
      function(err) {
        thisobj.listLoading = false
      }
    )
  },
  GetPayChannel: function(thisobj, params) {
    AjaxToken(
      thisobj,
      'GetPayChannel',
      params,
      'post',
      function(res) {
        var body = res.data
        if (body.success) {
          var str = thisobj.form.ID
          if (thisobj.form.ID == '00001') {
            str = '001'
          }
          thisobj.form.content = JSON.parse(body.data.JsonContent[str])
          thisobj.xlcontent = body.data.JsonContent
          body.data.PayTypList.forEach((element) => {
            thisobj.form.payTypes.push(element.payTypeID)
          })
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: 'error'
          })
        }
      },
      function(err) {}
    )
  },
  SavePayChannel: function(thisobj, params) {
    AjaxToken(
      thisobj,
      'SavePayChannel',
      params,
      'post',
      function(res) {
        var body = res.data
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: 'success',
            duration: 3000
          })
          thisobj.fetchData()
          thisobj.dialogFormVisible = false
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: 'error'
          })
        }
      },
      function(err) {}
    )
  },
  DelPayChannel: function(thisobj, params) {
    AjaxToken(
      thisobj,
      'DelPayChannel',
      params,
      'post',
      function(res) {
        thisobj.listLoading = false
        var body = res.data
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: 'success',
            duration: 3000
          })
          thisobj.fetchData()
          thisobj.dialogFormVisible = false
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: 'error'
          })
        }
      },
      function(err) {}
    )
  },
  GetPayTypeList: function(thisobj) {
    SelectAjax(
      'GetPayTypeList?val=',
      function(response) {
        var body = response.data
        thisobj.paytypeoptions = []
        body.data.forEach((element) => {
          thisobj.paytypeoptions.push({
            value: element.value,
            name: element.text
          })
        })
      },
      function(error) {}
    )
  }
}
</script>

